<!-- 首页 -->
<template>
  <div>
    <div
      style="display: flex; justify-content: space-between; padding: 30px 29px"
    >
      <el-button
        style="position: fixed; bottom: 100px; right: 100px"
        type="primary"
        circle
        @click="add()"
        >反馈</el-button
      >
      <el-card shadow="always" header="新增用户数量" style="width: 49%">
        <div style="font-size: 14px; color: #666">
          {{ time.split("-")[0] }}-01~{{ time.split("-")[0] }}-12 更新于{{
            time
          }}
        </div>
        <scEcharts ref="c1" height="300px" :option="option"></scEcharts>
      </el-card>
      <el-card shadow="always" header="用户分析图" style="width: 49%">
        <div style="font-size: 14px; color: #666">
          {{ time.split("-")[0] }}-01~{{ time.split("-")[0] }}-12 更新于{{
            time
          }}
        </div>
        <div style="display: flex; align-items: center">
          <div style="margin: 50px">
            <liquidfill
              :idd="'idd1'"
              :title="'女性占比'"
              :completionRate="gender.female ? gender.female * 100 : 0"
            >
            </liquidfill>
          </div>
          <div style="margin: 50px">
            <liquidfill
              :idd="'idd2'"
              :title="'男性占比'"
              :completionRate="gender.man ? gender.man * 100 : 0"
            ></liquidfill>
          </div>
        </div>
      </el-card>
    </div>
    <div v-if="secondAgentKpiList.length>0" style="margin: 20px 0">
      <div class="tit">二级代理商返点</div>
      <el-card
        shadow="always"
        :body-style="{ padding: '0' }"
        class="detail_card"
      >
        <div class="dc1-top">
          <div
            v-for="(item, index) in fyList"
            style="width: 20%; margin-left: 50px"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div
          v-if="secondAgentList.length > 0"
          style="display: flex; align-items: center; padding: 24px 0"
          v-for="(item, index) in secondAgentList"
          :key="index"
        >
          <div class="dc1-item">
            <img
              style="
                border-radius: 50%;
                width: 48px;
                height: 48px;
                object-fit: fill;
              "
              :src="$staticURL + item.avatar"
            />
            <div style="font-size: 14px; color: #ff68b2; margin-left: 12px">
              {{ item.name }}
            </div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt">{{ item.contactPhone }}</div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt">{{ item.totalRevenue }}</div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt">{{ item.distributionRebates }}</div>
          </div>
          <!-- <div class="dc1-item">
            <div class="dc1-txt1">{{ item. }}</div>
          </div> -->
        </div>

        <div v-if="secondAgentList.length == 0" class="emp">暂无数据</div>
      </el-card>
    </div>

    <div style="margin: 20px 0">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 29px;
          padding-bottom: 16px;
        "
      >
        <div class="tit">KPI完成情况</div>
        <div style="display: flex; align-items: center">
          <div
            v-for="(item, index) in KPIBtns"
            @click="KPIBtnsClick(index)"
            :class="kkIdx == index ? 'kk-btn-ac' : ''"
            :key="index"
            class="kk-btn"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <el-card
        shadow="always"
        :body-style="{ padding: '0' }"
        class="detail_card"
      >
        <div class="dc1-top">
           <div v-if="level==1"
            v-for="(item, index) in KPIList"
            style="width: 20%; margin-left: 50px"
            :key="index"
          >
            {{ item }}
          </div>
          <div v-if="level==2" 
            v-for="(item, index) in KPIList1"
            style="width: 20%; margin-left: 50px"
            :key="index"
          >
            {{ item }}
          </div>
         
        </div>
        <div
          v-if="secondAgentKpiList.length > 0"
          style="display: flex; align-items: center; padding: 24px 0"
          v-for="(item, index) in secondAgentKpiList"
          :key="index"
        >
          <div class="dc1-item">
            <img
              style="
                border-radius: 50%;
                width: 48px;
                height: 48px;
                object-fit: fill;
              "
              :src="$staticURL + item.avatar"
            />
            <div style="font-size: 14px; color: #ff68b2; margin-left: 12px">
              <div>{{ item.name }}</div>
              <!-- <div style="color: #666666">2024-04-22加盟</div> -->
            </div>
          </div>
          <div class="dc1-item" v-if="item.contactPhone">
            <div class="dc1-txt">{{ item.contactPhone }}</div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ item.pullNewUserNum
              }}<span class="dc1-txt">/{{ item.pullNewUserNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ item.groupShopUserNum
              }}<span class="dc1-txt">/{{ item.groupShopUserNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ item.onLineShopNum
              }}<span class="dc1-txt">/{{ item.onLineShopNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <el-progress
              style="width: 80%"
              :percentage="item.kpiPercentage|item.kpiPercentage"
              color="#FF68B2"
            ></el-progress>
          </div>
        </div>
        <div
          v-if="secondAgentKpiList1!=''"
          style="display: flex; align-items: center; padding: 24px 0"
          
          :key="index"
        >
          <div class="dc1-item">
            <img
              style="
                border-radius: 50%;
                width: 48px;
                height: 48px;
                object-fit: fill;
              "
              :src="$staticURL + secondAgentKpiList1.avatar"
            />
            <div style="font-size: 14px; color: #ff68b2; margin-left: 12px">
              <div>{{ secondAgentKpiList1.name }}</div>
              <!-- <div style="color: #666666">2024-04-22加盟</div> -->
            </div>
          </div>
          <div class="dc1-item" v-if="secondAgentKpiList1.contactPhone">
            <div class="dc1-txt">{{ secondAgentKpiList1.contactPhone }}</div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ secondAgentKpiList1.pullNewUserNum
              }}<span class="dc1-txt">/{{ secondAgentKpiList1.pullNewUserNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ secondAgentKpiList1.groupShopUserNum
              }}<span class="dc1-txt">/{{ secondAgentKpiList1.groupShopUserNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <div class="dc1-txt1">
              {{ secondAgentKpiList1.onLineShopNum
              }}<span class="dc1-txt">/{{ secondAgentKpiList1.onLineShopNumKpi }}</span>
            </div>
          </div>
          <div class="dc1-item">
            <el-progress
              style="width: 80%"
              :percentage="secondAgentKpiList1.kpiPercentage|secondAgentKpiList1.kpiPercentage"
              color="#FF68B2"
            ></el-progress>
          </div>
        </div>
        <div v-if="secondAgentKpiList.length === 0&&secondAgentKpiList1.length === 0" class="emp">暂无数据</div>
      </el-card>
    </div>

    <!-- <el-card shadow="always" class="detail_card">
      <div class="detail_box">
        <div class="detail_item">
          <div class="detail_title"><span>用户消费返还详情</span></div>
          <div class="detail_number">
            ￥<span>{{ userConsumeReturn }}</span>
          </div>
        </div>
      </div>
    </el-card> -->

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      custom-class="classDialog"
      :visible="visibleRecharge"
      @close="visibleRecharge = false"
      width="25%"
    >
      <depositMoney @successPay="successPay"></depositMoney>
    </el-dialog>

    <el-dialog title="反馈内容" :visible.sync="dialogVisible" width="30%">
      <el-form class="form addform" label-width="80px" label-position="top">
        <el-form-item label="问题描述" label-width="300px">
          <el-input
            type="textarea"
            
          class="textarea"
            maxlength="300"
            placeholder="仅限300字以内"
            v-model="pushform.intro"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="图片：" label-width="100px" prop="gifUrl"> -->
          <el-upload class="uploadEL"
            drag
            name="image"
            :action="$baseURL + '/biz/uploadImgage'"
            :headers="headers"
            multiple
            :on-success="handleAvatarSucces"
            :show-file-list="false">
            <img v-if="pushUrl || pushUrl1" width="100%" height="100%"
              :src="pushUrl1 ? $staticURL + push1 : pushUrl"
              class="uploadELImg">
            <i v-else line-height="1" class="el-icon-plus avatar-uploader-icon"></i>
            <!-- <div slot="tip" class="el-upload__tip">上传礼物动图,格式为jpg/jpeg/png/gif文件</div> -->
          </el-upload>
        <!-- </el-form-item> -->
        <!-- <el-form-item
          label="图片："
          label-width="100px"
          style=" flex-direction: column"
        >
          <el-upload
            class="uploadEL"
            drag
            name="image"
            :action="$baseURL + '/biz/uploadImgage'"
            :headers="headers"
            multiple
            :on-success="handleAvatarSucces"
            :show-file-list="false"
          >
            <img
              width="100%"
              height="100%"
              v-if="pushUrl || pushUrl1"
              :src="pushUrl1 ? $staticURL + push1 : pushUrl"
              class="uploadELImg"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-radio v-model="radio" label="1">我遇到了问题</el-radio>
        <el-radio v-model="radio" label="2">我要提建议</el-radio>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="feedback()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { number } from "echarts";
import depositMoney from "@/components/depositMoney/depositMoney";
import liquidfill from "@/components/liquidfill";
import scEcharts from "@/components/scEcharts";
import { getToken } from "@/utils/auth";
import { helpers } from "qrcanvas";
export default {
  components: {
    scEcharts,
    liquidfill,
    depositMoney,
  },
  name: "advertiserIndex",
  data() {
    return {
      push1: "",
      pushUrl1: "",
      pushUrl: "",

      radio: "1",
      pushform: {
        intro: "",
      },
      dialogVisible: false,
      secondAgentList: [],
      secondAgentKpiList: [],
      secondAgentKpiList1: [],
      userConsumeReturn: "",
      kkIdx: 0,
      percentage: 100,
      KPIBtns: ["全部", "已完成", "未完成"],
      fyList: ["用户信息", "联系方式", "二级代理商总收益", "一级分佣返点20%"],
      KPIList: [
        "用户信息",
        "联系方式",
        "拉新人数（三月内）",
        "团购商家入驻数量（三月内）",
        "线上商家入驻数量（三月内）",
        "KPI完成进度条",
      ],
      KPIList1: [
        "用户信息",
        // "联系方式",
        "拉新人数（三月内）",
        "团购商家入驻数量（三月内）",
        "线上商家入驻数量（三月内）",
        "KPI完成进度条",
      ],
      time: "",
      gender: {
        nan: "",
        female: "",
      },
      level:JSON.parse(localStorage.getItem("advertisementUserMes")).level,
      visibleRecharge: false,
      option: {
        xAxis: {
          boundaryGap: false,
          type: "category",
          name: "月份",
          data: [],
          // axisPointer: {
          //   show: true
          // }
        },
        yAxis: [
          {
            type: "value",
            name: "数量",
            minInterval: 1,
            splitLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            // name: '上个月收入',
            max: 25,
            type: "line",
            color: "#10a4aa",
            data: [],
          },
        ],
      },
    };
  },
  computed: {
    headers() {
      return {
        session_token: this.$store.getters.token,
        // session_token: '',
      };
    },
  },
  mounted() {
    this.getAgentHomePage();
    let advertisementUserMes = JSON.parse(
      localStorage.getItem("advertisementUserMes")
    );
    if (
      advertisementUserMes.payableDepositMoney >
      advertisementUserMes.realityDepositMoney
    ) {
      this.$message("该账号的押金还没缴交，请缴交");
      this.visibleRecharge = true;
    }
    let currentTimeStamp = new Date().getTime();
    this.time = this.formatDate(currentTimeStamp);
    console.log(currentTimeStamp, "88");
    console.log(this.time, "item");
  },
  methods: {
    handleAvatarSucces(res, file) {
      console.log(res, "===", file);
      this.pushUrl = URL.createObjectURL(file.raw);
      console.log(this.pushUrl, ")*******)");
      this.pushUrl1 = "";
      if (res.code == 200) {
        this.pushform.licenseUrl = res.data.imgageUrl;
      } else {
        this.$message(res.msg);
      }
    },
    add() {
      this.dialogVisible = true;
    },
    async feedback() {
      this.aa();
      console.log("11");
      let res = await this.$API.shop.addAdFeedback({
        adUserName: localStorage.getItem("adv_userName"),
        contactEmail: JSON.parse(localStorage.getItem("advertisementUserMes"))
          .contactEmail,
        contactPhone: JSON.parse(localStorage.getItem("advertisementUserMes"))
          .contactPhone,
        intro: this.pushform.intro,
        picUrl: this.pushform.licenseUrl,
        problem: this.pushform.problem,
        questionType: this.radio,
      });
      if (res.code == 200) {
        this.$message("提交成功");
        this.dialogVisible = false;
      }

      // }
    },
    aa() {
      if (!this.pushform.licenseUrl) {
        this.$message("请上传违规截图");
        return false;
      }
      this.$axios({
        method: "post",
        url: "https://api.yushiai.com.cn/biz/uploadImgage",
        data: this.pushform.licenseUrl,
        headers: {
          session_token: getToken(),
          "Content-Type":
            "multipart/form-data; boundary=----WebKitFormBoundaryLOZf2MbOw2wkMpjv",
        },
      }).then(async (res) => {
        //  console.log(res,'jieg');
      });
    },
    async turnoverStatistics() {
      let res = await this.$API.shop.turnoverStatistics({
        advertisementUserId: JSON.parse(
          localStorage.getItem("advertisementUserMes")
        ).advertisementUserId,
        begin: this.time.split("-")[0] + "-01-01",
        end: this.time.split("-")[0] + "-12-30",
        type: 1,
      });
      this.option.xAxis.data = res.data.dateList;
      this.option.series.data = res.data.turnoverList;
      this.gender.female = res.data.womenNum;
      this.gender.nan = res.data.manNum;
    },

    async getAgentHomePage() {
       
      if(JSON.parse(localStorage.getItem("advertisementUserMes"))
      .level==1){
       let res= await this.$API.shop.getAgentHomePage({
        id: JSON.parse(localStorage.getItem("advertisementUserMes"))
          .advertisementUserId,
        type: Number(this.kkIdx + 1),
      }); 
      this.userConsumeReturn = res.data.userConsumeReturn;
      this.secondAgentList = res.data.secondAgentList || [];
      this.secondAgentKpiList = res.data.secondAgentKpiList || [];
      }else {
        let res1=await this.$API.shop.getSecondAgentHomePage({
          id:JSON.parse(localStorage.getItem("advertisementUserMes"))
          .advertisementUserId
        })
        console.log(res1.data,'res1');
        this.secondAgentKpiList1=res1.data
      }

     
      this.turnoverStatistics();
    },
    KPIBtnsClick(i) {
      this.kkIdx = i;
      this.getAgentHomePage();
    },

    formatDate(currentTimeStamp) {
      // 创建一个 Date 对象，传入时间戳
      let date = new Date(currentTimeStamp);
      // 获取年、月、日、小时、分钟和秒
      let year = date.getFullYear();
      let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，并补零
      let day = ("0" + date.getDate()).slice(-2); // 补零
      let hours = ("0" + date.getHours()).slice(-2); // 补零
      let minutes = ("0" + date.getMinutes()).slice(-2); // 补零
      let seconds = ("0" + date.getSeconds()).slice(-2); // 补零

      // 拼接成 YYYY-MM-DD HH:mm:ss 格式的字符串
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },

    successPay() {
      this.visibleRecharge = false;
      this.getAdvertisementUserMes();
    },
    async getAdvertisementUserMes() {
      let res = await this.$API.members.getAdvertisementUserMes({
        advertisementUserId: JSON.parse(
          localStorage.getItem("advertisementUserMes")
        ).advertisementUserId,
      });
      localStorage.setItem("advertisementUserMes", JSON.stringify(res.data));
      console.log("代理商信息4", localStorage.getItem("advertisementUserMes"));
      this.turnoverStatistics();
    },
  },
};
</script>

<style lang="scss" scoped>

.uploadEL{
  width: 180px;
  height: 180px;
  overflow: hidden;
  margin-bottom: 19px;
 

} 
.textarea ::v-deep .el-textarea__inner{
  height: 200px;
  resize: none;
}
.uploadEL ::v-deep .el-upload{
    width: 100% !important;
    height: 100% !important;
  }
  .uploadEL ::v-deep .el-upload-dragger{
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;  
}
.detail_card {
  margin: 0 29px;

  .detail_box {
    .detail_item {
      flex: 1;

      .detail_title {
        font-size: 18px;
        color: #333;
        font-weight: 400;
        margin-bottom: 30px;

        .el-button {
          font-size: 16px;
        }
      }

      .detail_number {
        width: 470px;
        height: 265px;
        line-height: 265px;
        text-align: center;
        color: #ff68b2;
        font-size: 30px;
        border-radius: 20px;
        font-weight: 400;
        // background-color: #10a4aa0d;
        background-color: rgba(255, 104, 178, 0.05);

        span {
          font-size: 60px;
        }
      }
    }
  }
}

.tit {
  font-size: 20px;
  color: #333333;
  margin-left: 29px;
  margin-bottom: 12px;
}

.dc1-top {
  background: #f3f3f3;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
}

.dc1-item {
  width: 20%;
  margin-left: 50px;
  display: flex;
  align-items: center;
}

.dc1-txt {
  font-size: 14px;
  color: #333333;
}

.dc1-txt1 {
  font-size: 14px;
  color: #ff68b2;
}

.kk-btn {
  width: 72px;
  height: 32px;
  border-radius: 5px;
  background: #f3f3f3;
  font-size: 16px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24px;
  cursor: pointer;
}

.kk-btn-ac {
  background: rgba(255, 104, 178, 0.05);
  box-sizing: border-box;
  border: 1px solid #ff68b2;
  color: #ff68b2;
}

.emp {
  text-align: center;
  margin: 50px 0;
  font-weight: bold;
}
</style>
